<!-- 
      点点安盈详情页.html
      <宾和>
      
      Created by YSG on 2017-01-06.
      Copyright 2017 YSG. All rights reserved.
 -->

<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>点点安盈详情页</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../assets/css/mui.min.css" rel="stylesheet" />
		<link href="../assets/css/main.css" rel="stylesheet" />
		<style>
			.cell-title {
				color: #6d6d72;
				font-size: 15px;
				background-color: #efeff4;
			}
			.m-material{
				height: 120px;
			}
			
			.mui-preview-image.mui-fullscreen {
				position: fixed;
				z-index: 20;
				background-color: #000;
			}
			.mui-preview-header,
			.mui-preview-footer {
				position: absolute;
				width: 100%;
				left: 0;
				z-index: 10;
			}
			.mui-preview-header {
				height: 44px;
				top: 0;
			}
			.mui-preview-footer {
				height: 50px;
				bottom: 0px;
			}
			.mui-preview-header .mui-preview-indicator {
				display: block;
				line-height: 25px;
				color: #fff;
				text-align: center;
				margin: 15px auto 4;
				width: 70px;
				background-color: rgba(0, 0, 0, 0.4);
				border-radius: 12px;
				font-size: 16px;
			}
			.mui-preview-image {
				display: none;
				-webkit-animation-duration: 0.5s;
				animation-duration: 0.5s;
				-webkit-animation-fill-mode: both;
				animation-fill-mode: both;
			}
			.mui-preview-image.mui-preview-in {
				-webkit-animation-name: fadeIn;
				animation-name: fadeIn;
			}
			.mui-preview-image.mui-preview-out {
				background: none;
				-webkit-animation-name: fadeOut;
				animation-name: fadeOut;
			}
			.mui-preview-image.mui-preview-out .mui-preview-header,
			.mui-preview-image.mui-preview-out .mui-preview-footer {
				display: none;
			}
			.mui-zoom-scroller {
				position: absolute;
				display: -webkit-box;
				display: -webkit-flex;
				display: flex;
				-webkit-box-align: center;
				-webkit-align-items: center;
				align-items: center;
				-webkit-box-pack: center;
				-webkit-justify-content: center;
				justify-content: center;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				width: 100%;
				height: 100%;
				margin: 0;
				-webkit-backface-visibility: hidden;
			}
			.mui-zoom {
				-webkit-transform-style: preserve-3d;
				transform-style: preserve-3d;
			}
			.mui-slider .mui-slider-group .mui-slider-item img {
				/*width: auto;
				height: auto;
				max-width: 100%;
				max-height: 100%;*/
			}
			.mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {
				width: 100%;
			}
			.mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {
				display: inline-table;
			}
			.mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {
				display: table-cell;
				vertical-align: middle;
			}
			.mui-preview-loading {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				display: none;
			}
			.mui-preview-loading.mui-active {
				display: block;
			}
			.mui-preview-loading .mui-spinner-white {
				position: absolute;
				top: 50%;
				left: 50%;
				margin-left: -25px;
				margin-top: -25px;
				height: 50px;
				width: 50px;
			}
			.mui-preview-image img.mui-transitioning {
				-webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
				transition: transform 0.5s ease, opacity 0.5s ease;
			}
			@-webkit-keyframes fadeIn {
				0% {
					opacity: 0;
				}
				100% {
					opacity: 1;
				}
			}
			@keyframes fadeIn {
				0% {
					opacity: 0;
				}
				100% {
					opacity: 1;
				}
			}
			@-webkit-keyframes fadeOut {
				0% {
					opacity: 1;
				}
				100% {
					opacity: 0;
				}
			}
			@keyframes fadeOut {
				0% {
					opacity: 1;
				}
				100% {
					opacity: 0;
				}
			}
			/*.m-material{
				max-width: 100%;
				height: auto;
			}*/
			#scroll1{
				overflow: scroll;
			}
			
			.mui-bar-tab .mui-tab-item.mui-active{
				color:#FFFFFF !important;
			}
		</style>
	</head>
	<!--header beg-->
	<header class="mui-bar mui-bar-nav g-header">
		<a id="info" class="mui-icon mui-pull-right u-iconfont">&#xe618;</a>
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">点点安盈</h1>
	</header>
	<!--header end-->
	<div class="mui-content" style="margin-bottom: 44px;">
		<!--pro beg-->
		<ul class="mui-table-view m-proj m-nav2 m-nav3" id="G-proj" style="margin-top: 0;">
			<!--<li class="mui-table-view-cell">点点安盈</li>-->
			<li class="mui-table-view-cell">
				<div class="mui-table">
					<div class="mui-table-cell mui-col-xs-10">
						<h4 class="mui-ellipsis m-proj-tit m-bid-pro-name">&nbsp;</h4>
					</div>
					<div class="mui-table-cell mui-col-xs-2 mui-text-right m-proj-tag-div">
						<!--<span class="mui-h5 m-proj-tag tag-yew">券</span>
						<span class="mui-h5 m-proj-tag tag-ble">新</span>-->
					</div>
				</div>
				<div class="m-proj-info" style="border: 0; padding-bottom: 0;">
					<div class="m-proj-box m-proj-lt">
						<div class="m-info-top">
							<span class="m-big">&nbsp;</span>
							<span class="m-small">&nbsp;</span>
							<span class="m-unit">%</span>
						</div>
						<div class="m-info-des">年化利率(%)</div>
					</div>
				</div>
				<div class="m-range-bar z-act">
					<i style="width: 0%;"></i>
					<div class="m-range-round" style="left: 0%;">
						<div class="round"></div>
					</div>
				</div>
				<div class="m-proj-info">
					<div class="m-proj-box m-proj-lt">
						<div class="m-info-top">
							<span class="m-big m-loan-life">&nbsp;</span>
						</div>
						<div class="m-info-des">剩余期限</div>
					</div>
					<div class="m-proj-box m-proj-cn">
						<div class="m-info-top">
							<span class="m-big m-after-money">&nbsp;</span>
						</div>
						<div class="m-info-des">可投金额(元)</div>
					</div>
					<div class="m-proj-box m-proj-rt">
						<div class="m-info-top">
							<span class="m-big m-bid-money">&nbsp;</span>
						</div>
						<div class="m-info-des m-bid-money-desc">招标金额(元)</div>
					</div>
				</div>
				<div class="mui-table m-proj-nottom">
					<div class="mui-table-cell mui-col-xs-5">
						<h4 class="mui-ellipsis m-proj-tit">
                    	<i class="mui-icon u-iconfont mui-left">&#xe600;</i>
												<label class="m-start-money">&nbsp;</label>
												<span class="m-proj-info-more">理财编号:<label class="m-bid-pro-number">&nbsp;</label></span>
                    </h4>
					</div>
					<div class="mui-table-cell mui-col-xs-5 mui-text-right">
						<span class="mui-h5 m-proj-tag">购买截止日期:<label class="m-bid-end-time">&nbsp;</label></span>
					</div>
				</div>
			</li>
		</ul>

		<!--pro end-->
		<div id="slider" class="mui-slider m-mt10">
			<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted" style="background-color: #fff;">
				<a class="mui-control-item mui-active" href="#item1mobile">
					项目信息
				</a>
				<a class="mui-control-item" href="#item2mobile">
					项目材料
				</a>
			</div>
			<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-6"></div>
			<div class="mui-slider-group">
				<div id="item1mobile" class="mui-slider-item mui-control-content mui-active" style="min-height: 300px;">
					<div id="scroll1" class="mui-scroll-wrapper" style="min-height: 480px;">
						<div class="mui-scroll" >
							 <ul class="mui-table-view">
								 <!--<li class="mui-table-view-cell cell-title">资产</li>
									<li class="mui-table-view-cell">用户名<span class="mui-badge mui-badge-op m-pd-user-name">&nbsp;</span></li>
									<li class="mui-table-view-cell">年龄<span class="mui-badge mui-badge-op m-pd-age">&nbsp;</span></li>
									<li class="mui-table-view-cell">学历<span class="mui-badge mui-badge-op m-pd-education">&nbsp;</span></li>
									<li class="mui-table-view-cell">财务<span class="mui-badge mui-badge-op m-pd-main-finance">&nbsp;</span></li>
									<li class="mui-table-view-cell">工作城市<span class="mui-badge mui-badge-op m-pd-work-city">&nbsp;</span></li>
									<li class="mui-table-view-cell">行业<span class="mui-badge mui-badge-op m-pd-hangye-name">&nbsp;</span></li>-->
							<!--<li class="mui-table-view-cell cell-title">项目信息</li>-->
							 <ul class="mui-table-view"> 
					        <li class="mui-table-view-cell mui-collapse mui-active">
					            <a class="mui-navigate-right" href="#">项目描述</a>
					            <div class="mui-collapse-content">
					                <p class="m-pd-pro-des">&nbsp;</p>
					            </div>
					        </li>
					        <li class="mui-table-view-cell mui-collapse mui-active">
					            <a class="mui-navigate-right" href="#">资金用途</a>
					            <div class="mui-collapse-content">
					                <p class="m-pd-pro-use-way">&nbsp;</p>
					            </div>
					        </li>
					        <li class="mui-table-view-cell mui-collapse mui-active">
					            <a class="mui-navigate-right" href="#">还款来源</a>
					            <div class="mui-collapse-content">
					                <p class="m-pd-pro-pay-money-way">&nbsp;</p>
					            </div>
					        </li>
					         <li class="mui-table-view-cell mui-collapse mui-active" style="margin-bottom: 180px;">
					            <a class="mui-navigate-right" href="#">风险控制</a>
					            <div class="mui-collapse-content">
					                <p class="m-pd-pro-risk-ctr">&nbsp;</p>
					            </div>
					        </li>
					     </ul>
						</div>
					</div>
				</div>

				<div id="item2mobile" class="mui-slider-item mui-control-content" style="min-height: 300px;">
					<div id="scroll2" class="mui-scroll-wrapper" style="min-height: 480px;">
						<div class="mui-scroll">
							<ul class="mui-table-view m-proj-list-materials">
								
							</ul>
						</div>
					</div>

				</div>
<!--
				<div id="item3mobile" class="mui-slider-item mui-control-content" style="height: 210px;">
					<div id="scroll3" class="mui-scroll-wrapper">
						<div class="mui-scroll">
							<ul class="mui-table-view">
								<li class="mui-table-view-cell">名称<span class="mui-badge mui-badge-op">5</span></li>
								<li class="mui-table-view-cell">招标说明<span class="mui-badge mui-badge-op">5</span></li>
								<li class="mui-table-view-cell">投资范围<span class="mui-badge mui-badge-op">5</span></li>
								<li class="mui-table-view-cell">收益方式<span class="mui-badge mui-badge-op">5</span></li>
								<li class="mui-table-view-cell">锁定期<span class="mui-badge mui-badge-op">5</span></li>
							</ul>
						</div>
					</div>

				</div>-->
				
			</div>
		</div>
	</div>

	<!--footer ben-->
	<nav class="mui-bar mui-bar-tab m-proj-footer" href="javascript:;">
		<a class="mui-tab-item m-btn-disabled" id="G-go-buy" >
			立即购买
		</a>
	</nav>
	<!--footer end-->

	<body>
		<script src="../assets/lib/mui/mui.min.js"></script>
		<script src="../assets/lib/mui/mui.zoom.js"></script>
		<script src="../assets/lib/mui/mui.previewimage.js"></script>
		<script src="../assets/lib/mui/mui.lazyload.js"></script>
	  <script src="../assets/lib/mui/mui.lazyload.img.js"></script>
		<script src="../assets/lib/zepto/zepto.min.js"></script>
		<script src="../assets/lib/layer_mobile/layer.js"></script>
		<script src="../assets/common/util.js"></script>
		<script src="../assets/common/common.js"></script>
		
		<script type="text/javascript" src="../assets/js/bidPlanDetail.js" ></script>
		<script type="text/javascript">

			$(function() {
				new Main();
			});
			
			(function($) {
                $('#scroll').scroll({
                    indicators: true //是否显示滚动条
                });
                var segmentedControl = document.getElementById('segmentedControl');
                $('.mui-input-group').on('change', 'input', function() {
                    if (this.checked) {
                        var styleEl = document.querySelector('input[name="style"]:checked');
                        var colorEl = document.querySelector('input[name="color"]:checked');
                        if (styleEl && colorEl) {
                            var style = styleEl.value;
                            var color = colorEl.value;
                            segmentedControl.className = 'mui-segmented-control' + (style ? (' mui-segmented-' + style) : '') + ' mui-segmented-' + color;
                        }
                    }
                });
            })(mui);
		</script>
	</body>

</html>